<template>
    <div>
        <el-button  @click="add">
          添加
        </el-button>
 <el-table
      :data="tableData1"
      style="width: 100%"
      row-key="id"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="id" label="编号" />
      <el-table-column prop="name" label="权限名称" />
      <el-table-column prop="path" label="路径" />
      <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row)">
          Edit
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.row)"
        >
          Delete
        </el-button>
      </template>
    </el-table-column>
    </el-table>


     <el-dialog v-model="dialogFormVisible" :title="title" width="500">
    <el-form :model="form">
        <el-form-item label="权限名称" >
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="权限路径" >
        <el-input v-model="form.path" autocomplete="off" />
      </el-form-item>

       <el-form-item label="权限选择" >
         <el-select
      v-model="form.pid"
      placeholder="Select"
      size="large"
      style="width: 240px"
    >
      <el-option
        key=0
        label="顶级权限"
        :value="0"
      />
      <el-option
        v-for="item in tableData1"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        
        <el-button type="primary" @click="ok">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
    </div>
</template>

<script setup>
import {getauth,getaadd,getadel,getaedit} from '../../request/index'
import {ref,reactive} from 'vue'
import toTree from '../../utils/toTree'
const tableData1=ref([])
getauth().then(res=>{
    console.log('auth',res)
    tableData1.value=toTree(res.data.data)
    console.log(tableData1)
})

const title=ref('')

const dialogFormVisible = ref(false)
const form = reactive({
  name: '',
  pid:0,
  path:''
})

const add=()=>{
    dialogFormVisible.value=true
    title.value='添加'
}

const id=ref()
const handleEdit=(row)=>{
    dialogFormVisible.value=true
    title.value='修改'
    id.value=row.id
    form.name=row.name
    form.pid=row.pid
    form.path=row.path

}

const ok=()=>{
    if(title.value=='添加'){
        getaadd(form).then(res=>{
            console.log('authadd',res)
        })
    }else if(title.value=='修改'){
        getaedit(id.value,form).then(res=>{
            console.log(res,999)
        })
        }
    dialogFormVisible.value=false
}

const handleDelete=(row)=>{
    getadel(row.id).then(res=>{
        console.log('adel',res)
    })
}
</script>

<style lang="scss" scoped>

</style>